<script setup>
import SltFromOthApi from '@/components/SltFromOthApi/SltFromOthApi.vue'
import { PlusOutlined, SearchOutlined, RedoOutlined } from '@ant-design/icons-vue'
import { getOptions } from '@/utils'
import { ref } from 'vue'

const emits = defineEmits(['add', 'init', 'search'])
const props = defineProps({
  total: {
    type: Number,
    default: 0
  }
})
// 新增按钮点击
const add = () => {
  emits('add')
}
// 刷新
const machineName = ref('')
const machineType = ref(null)
const machineStatus = ref(null)
const belongOrgId = ref([])
const init = () => {
  machineName.value = ''
  machineType.value = null
  machineStatus.value = null
  belongOrgId.value = []
  emits('init')
}
// 搜索
const search = () => {
  emits('search', {
    machineName: machineName.value ?? null,
    machineType: machineType.value ?? null,
    machineStatus: machineStatus.value ?? null,
    belongOrgId: belongOrgId.value?.[belongOrgId?.value?.length - 1] || null
  })
}
</script>

<template>
  <div class="head">
    <div class="left">
      <AButton type="primary" @click="add"> <PlusOutlined /> 新增 </AButton>
      <div class="total">农机数量：{{ props.total }} 台</div>
    </div>
    <div class="right">
      <a-input
        v-model:value="machineName"
        placeholder="请输入农机名称查询"
        class="com-ipt"
        allowClear
        @input="search"
      >
        <template #suffix>
          <SearchOutlined />
        </template>
      </a-input>
      <a-select
        class="com-ipt"
        placeholder="筛选农机类型"
        v-model:value="machineType"
        :options="getOptions('machine_type')"
        allowClear
        :fieldNames="{ label: 'constLabel', value: 'constValue' }"
        @change="search"
      />
      <a-select
        class="com-ipt"
        placeholder="筛选农机状态"
        v-model:value="machineStatus"
        :options="getOptions('machine_status')"
        allowClear
        :fieldNames="{ label: 'constLabel', value: 'constValue' }"
        @change="search"
      />
      <SltFromOthApi
        :fieldNames="{ label: 'name', value: 'id', children: 'children' }"
        v-model="belongOrgId"
        placeholder="请选择农机归属查询"
        apiName="getDepList"
        class="com-ipt"
        @change="search"
      />
      <AButton type="primary" @click="search"> <SearchOutlined /> 搜索 </AButton>
      <AButton type="primary" @click="init"> <RedoOutlined /> 刷新 </AButton>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.head {
  display: flex;
  gap: 8px;
  justify-content: space-between;

  .left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 250px;

    .total {
      display: flex;
      align-items: center;
      border-left: 3px solid #eee;
      padding-left: 10px;
      font-size: 18px;
      font-weight: bold;
      color: #333;
      height: 100%;
    }
  }

  .right {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }
}
</style>
